<template>
  <div class="my-container">
    <!--未登入-->
    <div class="header not-login" v-if="!token">
      <div class="login-btn" @click="pushLogin()">
        <img class="mobile-img" src="../../assets/mobile.png" alt="" />
        <span class="text">注册 / 登录</span>
      </div>
    </div>
    <!-- 登录后的布局 -->
    <div class="header user-info" v-else>
      <div class="base-info">
        <div class="left">
          <van-image
            :src="lj + userInfo.photo"
            class="avatar"
            round
            fit="cover"
          ></van-image>
          <span class="name">{{ userInfo.userName }}</span>
        </div>
        <div class="right">
          <van-button size="mini" round>编辑资料</van-button>
        </div>
      </div>
      <div class="data-stats">
        <div class="data-item">
          <span class="count">{{ userInfo.art_count }}</span>
          <span class="text">头条</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.follow_count }}</span>
          <span class="text">关注</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.fans_count }}</span>
          <span class="text">粉丝</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.like_count }}</span>
          <span class="text">获赞</span>
        </div>
      </div>
    </div>
    <!--下面主体区域-->
    <van-grid :column-num="2" clickable>
  <van-grid-item icon="star-o" text="收藏" />
  <van-grid-item icon="clock-o" text="历史" />
</van-grid>

<van-cell title="消息通知" is-link />
<van-cell title="小君同学" is-link />
<van-cell title="退出登入" class="outLogin" v-if="token" @click="clearToken()"/>
  </div>
    </template>

<script setup>
import router from "../../router/router"
import { onMounted, ref, reactive, toRefs } from "vue"
import { showConfirmDialog, showToast } from 'vant';
import axios from "axios"

let token = ref(window.sessionStorage.getItem("token"))
let lj = import.meta.env.VITE_APP_URL

let ress = reactive({
    userInfo: {
        userName: "", //用户名
        art_count: 6, //发布的文章数目
        follow_count: 0, //关注的数目
        fans_count: 0, //粉丝数目
        like_count: 0, //被点赞数目
        photo: ''
    },
})
let { userInfo } = toRefs(ress)
//点击登入
function pushLogin() {
    router.push("/login")
}
//点击退出登入
function clearToken() {
    showConfirmDialog({
        title: '是否退出',
        message:
            '确定是否退出？',
    }).catch((err) => err).then((res) => {
        if (res !== 'confirm') {
            return showToast({
                message: '取消退出登入',
            });
        } else {
            window.sessionStorage.removeItem("token")
            window.sessionStorage.removeItem("userID")
            location.reload()
        }
    })
}
//获取用户完整信息
function getUserInfo() {
    axios.get("/userInfo/get", { params: { userId: window.sessionStorage.getItem("userID") } }).then((res) => {
        console.log(res)
        if (res.status !== 200) return showToast('个人用户加载失败');
        ress.userInfo.userName = res.data.userName
        ress.userInfo.art_count = res.data.art_count
        ress.userInfo.follow_count = res.data.follow_count
        ress.userInfo.fans_count = res.data.fans_count
        ress.userInfo.like_count = res.data.like_count
        ress.userInfo.photo = res.data.photo
    })
}

onMounted(() => {
    getUserInfo()
})
</script>

<style scoped>
.header {
    height: 361px;
    background: url("../../assets/banner.png");
    background-size: cover;
}

.not-login {
    /* 没有登录的效果样式*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.not-login .login-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mobile-img {
    width: 132px;
    height: 132px;
    margin-bottom: 15px;
}

.text {
    font-size: 28px;
    color: #fff;
}


/*登入后*/
.user-info .base-info {
    height: 231px;
    padding: 70px 32px 23px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-info .left {
    display: flex;
    align-items: center;
}

.user-info .left .avatar {
    width: 132px;
    height: 132px;
    margin-right: 13px;
    border: 1px solid #fff;
}

.user-info .left .name {
    font-size: 30px;
    color: #fff;
}

.user-info .data-stats {
    /* background-color: #ccc; */
    display: flex;
    /* height: 130px; */
}

.user-info .data-stats .data-item {
    height: 130px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.user-info .data-stats .count {
    font-size: 36px;
}

.user-info .data-stats .text {
    font-size: 23px;
}


/*下面主体 */
.outLogin {
    color: #d86262;
    text-align: center;
    margin-top: 10px;

}
</style>